<template>
    <div>
        <h1>用户显示页面</h1>
        <a href="/add">用户新增页面</a>
        <table class="table">
            <tbody>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>密码</th>
                    <th>出生日期</th>
                    <th>年龄</th>
                    <th>状态</th>
                    <th>是否入职</th>
                    <th>性别</th>
                    <th>图像</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item in data.list" :key="item.id" >
                    <td>{{ item.number }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.pwd }}</td>
                    <td>{{ moment(item.barthday).format('YYYY-MM-DD hh:mm:ss') }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.stateId }}</td>
                    <td>{{ item.isDeleted }}</td>
                    <td>{{ item.sex }}</td>
                    <td><img :src="item.img" width="50" height="50" alt="" /></td>
                    <td> <input
              type="button"
              value="修改"
              class="btn btn-primary"
              @click="update(item.id)"
            /></td>
                </tr>
            </tbody>
        </table>

         <!-- 分页 -->
    <div>
      <!-- 显示 -->
      <span
        >共<b>{{ data.count }}</b
        >条</span
      >
      <span
        >每页<b>{{ info.pagesize }}</b
        >条</span
      >
      <span
        >共<b>{{ info.pageindex }}/{{ data.page }}</b
        >页</span
      >
      <!-- 分页  全都是改是页码 -->
      <input type="button" value="首页" @click="goPage(1)" />
      <input type="button" value="上一页" @click="goPage(info.pageindex - 1)" />
      <span v-for="item in data.page" @click="goPage(item)">&emsp;{{
        item
      }}&emsp;</span>
      <input type="button" value="下一页" @click="goPage(info.pageindex + 1)" />
      <input type="button" value="尾页" @click="goPage(data.page)" />
      <input type="number" v-model="info.pageindex" />
      <input type="button" value="跳转" @click="goPage(info.pageindex)" />
      <!-- 这个改的页容量  -->
      <select v-model="info.pagesize" @change="show">
        <option :value="item" v-for="item in arr">每页{{ item }}条</option>
      </select>
    </div>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import{ref,reactive,onMounted} from 'vue'
import{useRouter,useRoute} from 'vue-router'
import moment from 'moment'
const route=useRoute();
const router=useRouter();
let info: any = reactive({
  pageindex: 1,
  pagesize: 2,
});


let data: any = reactive({
  list:[],
  count: 0,
  page: 0,
});


let arr: any = ref([2, 4, 6, 8]);
const show = () => {
  info.pageindex = 1;
  getList();
};


const goPage = (num: any) => {
  console.log(num);
  if (num < 1) {
    info.pageindex = 1;
    return;
  }
  if (num > data.page) {
    info.pageindex = data.page;
    return;
  }
  info.pageindex = num;
  getList();
};
onMounted(()=>{
  getList();
})
const getList=()=>{
  axios.get("https://localhost:7113/api/Emp/getAll",{params:info}).then(res=>{
    console.log(res.data);
    
Object.assign(data,res.data)
  })
}


const update = (id: any) => {
  router.push({
    path: '/update',
    query: {
      id: id,
    },
  });
};
</script>

<style scoped>

</style>